<template>
  <view class="flex items-center justify-center py-4 bg-white relative">
    <view class="absolute left-4" v-if="showBackButton" @click="handleBack">
      <img :src="backImageSrc" :alt="backAltText" class="w-[64rpx] h-[64rpx]" />
    </view>
    <text class="text-lg font-medium">{{ title }}</text>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

// 组件属性
const props = defineProps({
  // 标题文字
  title: {
    type: String,
    default: "标题",
  },
  // 是否显示返回按钮
  showBackButton: {
    type: Boolean,
    default: true,
  },
  // 自定义返回事件
  customBack: {
    type: Function,
  },

  // 返回按钮图片路径
  backImageSrc: {
    type: String,
    default: "/static/images/nav_back.png",
  },
  // 返回按钮图片alt文本
  backAltText: {
    type: String,
    default: "返回",
  },
});

// 返回按钮事件处理
const handleBack = () => {
  if (props.customBack) {
    props.customBack();
  } else {
    // 使用uni-app的返回方法
    uni.navigateBack({
      delta: 1,
      fail: () => {
        // 如果返回失败，则返回首页
        uni.switchTab({
          url: "/pages/home/index",
        });
      },
    });
  }
};
</script>

<style scoped></style>
